<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关系图：type = graph</title>
  <script src="./echarts.js"></script>
  <script src="./data/graphData.js"></script>

  <style lang="css">
    #chart1 {
      width: 100%;
      height: 800px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    const categories = []
    for (let i = 0; i < 7; i++) {
      categories[i] = {
        name: '人物关系' + (i + 1)
      }
    }
    console.log('categories', categories)
    console.log('data', data)
    const myChart1 = echarts.init(document.getElementById('chart1'));
    myChart1.setOption({
      title: {
        text: '人名的名义关系图谱',
        top: 'bottom',
        left: 'right',
        textStyle: {
          fontSize: 24
        }
      },
      legend: {
        data: categories.map(function (item) { // 这里与系列中的categories配合
          return item.name
        }),
        top: 20,
        itemGap: 20,
      },
      tooltip: {
        formatter (param) {
          if (!param.data.des) { // 鼠标在线条上
            return param.data.source + '与' + param.data.target + '的关系为：' + param.data.name
          } else { // 鼠标在节点上
            return param.data.name + '<br/>' + param.data.des
          }
        },
      },
      series: {
        name: '人名的名义关系图谱',
        type: 'graph',
        coordinateSystem: null, // 不使用坐标线
        hoverAnimation: true,
        roam: true,
        nodeScaleRatio: 0.6, // 值越大缩放的就越厉害
        focusNodeAdjacency: true, // 突出显示节点以及节点的边和邻接节点, 放在线条上focus的高亮其他的变暗
        symbol: 'circle',
        symbolSize: 50,
        // layout: 'circular',
        // circular: {
        //   rotateLabel: false,
        // },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: 20,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.6)'
        },
        lineStyle: {
          // color: '#f00',
          color: 'source',
          curveness: 0.3,
        },
        label: {
          show: true, // 全局label是否展示
          textBorderColor: '#666',
          textBorderWidth: 2,
          fontSize: 14,
        },
        edgeLabel: { // 线条上的文本标签
          show: true,
          fontSize: 14,
          formatter (param) {
            return param.data.name // 注意这个name是自定义的
          }
        },
        emphasis: {
          label: {
            fontSize: 20,
          },
          lineStyle: {
            width: 10,
          },
          edgeLabel: { // 线条上的文本标签
            // color: 'pink',
            fontSize: 20,
          },
        },
        categories: categories, // 节点分类的类目，与legend配合可实现当前效果
        data: [
          {
            name: '李达康',
            symbolSize: 80,
            x: 100,
            y: 100,
            // itemStyle: {
            //   color: 'blue'// 这里的颜色会覆盖series中
            // },
            category: 0, // 取categories中索引为0的系列
            "des": '汉东省省委常委',
            value: 0,
            label: {
              show: true,
            }
          },
          {
            name: '孙连成',
            symbolSize: 80,
            x: 200,
            y: 200,
            category: 0,
            "des": '懒政干部代表人物',
            value: 1,
          },
          {
            name: '沙瑞金',
            symbolSize: 80,
            x: -200,
            y: 200,
            category: 1,
            "des": '汉东省省委数据',
            value: 2,
          },
        ],
        links: [
          {
            source: '李达康',// 关系的起点对应的数据名称
            target: '孙连成',// 关系的终点对应的数据名称
            "name": '前任领导', // 注意这个name是自定义的 李达康是孙连成的前任领导
          },
          {
            source: '沙瑞金',// 关系的起点对应的数据名称
            source: 2,// source 和 target 也可以传索引, 索引就是data中数据的索引
            target: '李达康',// 关系的终点对应的数据名称
            target: 0,// 关系的终点对应的数据名称
            "name": '领导', // 注意这个name是自定义的 沙瑞金是李达康的领导
            "name": '朋友', // 注意这个name是自定义的 沙瑞金是李达康的领导
            symbol: ['arrow', 'arrow'], // 当name是朋友时，沙瑞金是李达康的朋友，同时李达康也是沙瑞金的朋友。也就是source和target的关系是相互的，此时可以设置symbol为['arrow', 'arrow']
          },
        ],

        data1: data.nodes, // 动态数据
        links1: data.links, // 动态数据
      }
    })
  </script>
</body>

</html>